@extends('admin.layouts.common')

@section('style')
<style media="screen">
.contextmenu{
	background: #2f4050;
	width: 120px;
	position: absolute;
	z-index: 9999;
	display: none;
	padding:0;
	box-shadow: 3px 3px 3px #888888;
	min-height: 144px;
}
.contextmenu li {
	list-style-type:none;
	color:#a7b1c2;
	border-bottom: 1px solid #a7b1c2;
	padding:8px;
	font-size: 14px;
}
.contextmenu li:hover{
	color: #FFF;
	cursor: pointer;
	border-left:4px solid #409EFF;
}
.box-card-md{
	min-height: 500px;
}
</style>
@endsection

@section('Main')
<el-row>
	<el-col :md="12">
		<el-card class="box-card box-card-md">
			<div slot="header">
				<span class="span-primary"><i class="fa fa-list"></i></span>
				{{$nowNode->name}}
			</div>
			<div class="el-card-ct">
				<el-input
				  placeholder="输入关键字进行过滤"
				  v-model="filterText" class="filterText">
				</el-input>
				<el-tree :data="treeData" node-key="id"
					ref="tree"
					:props="props"
					:filter-node-method="filterNode"
					@node-contextmenu="contextmenu">
				</el-tree>
			</div>
		</el-card>
	</el-col>
</el-row>

<!-- contextmenu -->
<ul id="contextmenu" class="contextmenu">
	<li @click="addSubNode"><i class="fa fa-plus"></i> 添加子节点</li>
	<li @click="editNode"><i class="fa fa-edit"></i> 编辑节点</li>
	<li @click="delNode"><i class="fa fa-trash-o"></i> 删除节点</li>
	<li><i class="fa fa-ban"></i> 取消操作</li>
</ul>
<!-- contextmenu -->


<script type="text/javascript">
var Main = new Vue({
	el:"#Main",
	data:{
		treeData:'',
		props:{
			label:"name",
		},
		operateNode:'',
		filterText: '',
	},
	mounted:function() {
		this.getTreeData();
	},
	watch: {
		filterText(val) {
			this.$refs.tree.filter(val);
		}
    },
	methods:{
		getTreeData() {
			$.post('{{url("admin/node/index")}}',{_token:'{{ csrf_token() }}'},function(res){
				Main.treeData = res.data;
			})
		},
		filterNode(value, data) {
	        if (!value) return true;
	        return data.name.indexOf(value) !== -1;
      	},
		contextmenu($event,data) {
			this.operateNode=data
			$(".contextmenu").hide();
			$(".contextmenu").css({
				"display":"block",
				"top":$event.clientY+"px",
				"left":$event.clientX+"px"
			});
		},
		addSubNode() {
			FormBox.form = {
				pid:this.operateNode.id,
				name:'',
				ctrl:'',
				action:'',
				icon:'',
				is_menu:1,
				sort:0
			};
			FormBox.subType = "add";
			FormBox.show_pid = this.operateNode.name;
			FormBox.FormTitle = "添加 “"+this.operateNode.name+"” 的子节点"
			FormBox.showForm = true;
		},
		addTopNode() {
			FormBox.form = {
				pid:0,
				name:'',
				ctrl:'',
				action:'',
				icon:'',
				is_menu:1,
				sort:0
			};
			FormBox.subType = "add";
			FormBox.show_pid = "顶级节点";
			FormBox.FormTitle = "添加 “顶级” 节点"
			FormBox.showForm = true;
		},
		editNode() {
			FormBox.form = {
				id:this.operateNode.id,
				pid:this.operateNode.pid,
				name:this.operateNode.name,
				ctrl:this.operateNode.ctrl,
				action:this.operateNode.action,
				icon:this.operateNode.icon,
				is_menu:this.operateNode.is_menu,
				sort:this.operateNode.sort,
			};
			FormBox.subType = "edit";
			FormBox.show_pid = "";
			FormBox.FormTitle = "编辑 “"+this.operateNode.name+"” 节点"
			FormBox.showForm = true;
		},
		delNode() {
			var tips = "删除“"+this.operateNode.name+"”后不可恢复，确定继续吗？";
			Main.$confirm(tips, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				if(Main.operateNode.children.length !=0){
					Main.$notify.error({title: '错误',message: '该节点下有子节点，不可删除'});
					return false;
				}
				$.post("{{url('admin/node/nodedel')}}",{
					_token:"{{ csrf_token() }}",
					id:Main.operateNode.id
				},function(res){
					if(res.code != 1){
						Main.$notify.error({title: '错误',message: res.msg});
					}else{
						Main.$notify({title: '成功',message: res.msg,type: 'success'});
						Main.getTreeData();
					}
				})
			}).catch(() => {
				Main.$notify.info({title: '消息',message: "删除已取消"});
			});
		},
	}
});
$(document).on("click",function(){
	$(".contextmenu").hide();
})
</script>
@endsection

@section('Component')
<div id="FormBox">
<el-dialog :title="FormTitle" :visible.sync="showForm" top="5vh">
	<div class="FormBox">
		<el-form
			label-width="100px" :model="form"
			:rules="rules" ref="form" class="curForm">
			<el-form-item label="节点名称" prop="name">
				<el-input v-model="form.name" placeholder="请输入节点名称"></el-input>
			</el-form-item>
			<el-form-item label="所属节点" prop="show_pid">
				<el-input v-model="show_pid" disabled></el-input>
			</el-form-item>
			<el-form-item label="控制器名" prop="ctrl">
				<el-input v-model="form.ctrl" placeholder="请输入控制器名"></el-input>
			</el-form-item>
			<el-form-item label="方法名" prop="action">
				<el-input v-model="form.action" placeholder="请输入方法名"></el-input>
			</el-form-item>
			<el-form-item label="节点图标" prop="icon">
				<el-input v-model="form.icon" placeholder="只有顶级节点需要"></el-input>
			</el-form-item>
			<el-form-item label="节点排序" prop="sort">
				<el-input-number v-model="form.sort" :min="0" :max="999"></el-input-number>
			</el-form-item>
			<el-form-item label="是否为菜单项" prop="is_menu">
				<el-radio-group v-model="form.is_menu" size="small">
					<el-radio-button :label="0">否</el-radio-button>
					<el-radio-button :label="1">是</el-radio-button>
				</el-radio-group>
			</el-form-item>
		</el-form>
	</div>
	<div slot="footer" class="dialog-footer">
		<el-button @click="showForm = false">取消</el-button>
		<el-button type="success" @click="subForm">保存</el-button>
	</div>
</el-dialog>
</div>
<script type="text/javascript">
var FormBox = new Vue({
	el:"#FormBox",
	data() {
		return {
			showForm:false,
			subType:'add',
			FormTitle:"表单",
			show_pid:"顶级节点",
			form:{
				pid:0,
				name:'',
				ctrl:'',
				action:'',
				icon:'',
				is_menu:1,
				sort:0,
			},
			rules:{
				name:[{required:true,message:'请输入节点名称',trigger:['blur','change']}],
				ctrl:[{required:true,message:'请输入控制器名称',trigger:['blur','change']}],
				action:[{required:true,message:'请输入方法名称',trigger:['blur','change']}],
			}
		}
	},
	methods:{
		subForm() {
			if(this.subType == 'add'){
				var url = "{{url('admin/node/nodeadd')}}";
			}else{
				var url = "{{url('admin/node/nodeedit')}}";
			}
			var param = this.form;
			param._token = '{{ csrf_token() }}';
			$.post(url,param,function(res){
				if(res.code == 1){
					Main.$notify({title:"成功",type:"success",message:res.msg});
					Main.getTreeData();
					FormBox.showForm = false;
				}else{
					Main.$notify.error({title:'错误',message:res.msg});
					FormBox.showForm = false;
				}
			})
		}
	}
})
</script>
@endsection
